<!--需要修改的区域 ：开始-->
<link rel="stylesheet" href="../src/css/pages/account.css">
<div class="fmp-container">
    <article class="container-fluid">
        <div class="row">

            <!--新增账号：开始-->
            <div class="add-area col-sm-12">
                <a href="javascript:void(0);" target="_blank" class="btn btn-primary btn-lg btn-block add-action">Add&nbsp;Facebook&nbsp;Account</a>
                <p>{{i18n-accountRelatingTxt}}</p>
            </div>
            <!--新增账号：结束-->
            <!--列表开始-->
            <section id="con-area" class="content col-sm-12" style="display: none;">
                <div class="col-sm-12 no-padding config-area-div">
                    <div style="padding-left: 5px">
                        <div id="bm-account"></div>
                        <div id="unbind" >
                            <a href="#!unbind" class="btn btn-outline btn-xs">{{i18n-unbind-bm}}</a>
                        </div>
                    </div>

                    <div class="text-right logsyn">
                        <a href="javascript:void(0)" class="btn btn-primary" id="sync-history-action">{{i18n-optlog}}</a> &nbsp;
                        <a href="javascript:void(0)" class="btn btn-default" id="sync-confirm-action">{{i18n-synAccount}}</a>
                    </div>
                    <div class="ndp-tab-wrapper" name="plain-tab" id="bm-businesses" style="padding-left: 5px"></div>

                </div>

                <div v-component="commGrid" class="col-sm-12 gridpadding">
                    <!--列表：开始-->
                    <table list-manager="entrustAccountList">
                        <thead>
                            <tr>
                                <th width="55" th-name="order" data-drag="no" data-adjust="no" >{{i18n-order}}</th>
                                <th th-name="fbAccountName">{{i18n-fbAccountName}}</th>
                                <th th-name="fbAccountId">{{i18n-fbAccountId}}</th>
                                <th th-name="accessStatus">{{i18n-accessStatus}}</th>
                                <!--<th th-name="dailySpendLimit">每日花费上限$</th>-->
                                <th th-name="balance">{{i18n-balance}}</th>
                                <th th-name="accountStatus">{{i18n-accountStatus}}</th>
                                <th th-name="timezone">{{i18n-timezone}}</th>
                                <th th-name="unBindAccount">{{i18n-unBindAccount}}</th>
                            </tr>
                        </thead>
                        <tbody id="grid">
                        </tbody>
                    </table>
                    <!--列表：结束-->
                </div>
            </section>
            <!--列表结束-->
        </div>
    </article>
</div>
<div id="dialog-history" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">{{i18n-accountOptLog}}</h4>
            </div>
            <div class="modal-body">
            </div>
        </div>
    </div>
</div>
<!--<div id="dialog-sync-confirm" title="同步确认">-->
<!--</div>-->
<div id="dialog-sync-confirm" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">{{i18n-SynConfirm}}</h4>
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary synaccountBtn" data-dismiss="modal">{{i18n-confirm}}</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">{{i18n-cancel}}</button>
            </div>
        </div>
    </div>
</div>
<!--dialog:解绑账号-->
<div id="dialog-unbind-confirm" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">{{i18n-unbindAccount}}</h4>
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default synaccountBtn" data-dismiss="modal">{{i18n-confirm}}</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal">{{i18n-cancel}}</button>
            </div>
        </div>
    </div>
</div>
<script type="text/x-template" id="t-sync-confirm">
    <% if(recycleAccounts.length>0){ %>
        <input type="checkbox" name="checkbox-inline" value="0" checked="checked" class="hidden" />
        <div class="jarviswidget jarviswidget-color-darken" id="wid-id-1" data-widget-editbutton="false">
            <header>
                <h2>{{i18n-Recyclingaccount}}</h2>
            </header>
            <!-- widget div-->
            <div>
                <div class="widget-body no-padding">
                    <div class="alert alert-info no-margin fade in">
                        <i class="fa-fw fa fa-info"></i> {{i18n-RecyclingaccountMsg}}
                    </div>
                    <table class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th></th>
                                <th>{{i18n-fbAccountName}}</th>
                                <th>{{i18n-fbAccountId}}</th>
                            </tr>
                        </thead>
                        <tbody>
                            <% _.each(recycleAccounts, function(account,i) { %>
                                <tr>
                                    <td>
                                        <%=i+1%>
                                    </td>
                                    <td>
                                        <%=(account.name==''?account.fbAccountId:account.name)%>
                                    </td>
                                    <td>
                                        <%=account.fbAccountId%>
                                    </td>
                                </tr>
                                <% }) %>
                        </tbody>
                    </table>
                </div>
                <!-- end widget content -->
            </div>
            <!-- end widget div -->
        </div>
        <% } %>
            <% if(appendAccounts.length>0){ %>
                <div class="row">
                    <article class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <div class="jarviswidget jarviswidget-color-darken" id="wid-id-4" data-widget-editbutton="false">
                            <div>
                                <div class="widget-body no-padding">
                                    <table class="table table-bordered table-striped">
                                        <thead>
                                            <tr>
                                                <th>
                                                    <!--<label class="checkbox">-->
                                                    <input type="checkbox" id="CheckAll">
                                                    <i></i>
                                                    <!--</label>-->
                                                </th>
                                                <th>{{i18n-fbAccountName}}</th>
                                                <th>{{i18n-fbAccountId}}</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <% _.each(appendAccounts, function(account,i) { %>
                                                <tr>
                                                    <td style="width:65px;">
                                                        <!--<label class="checkbox">-->
                                                        <input type="checkbox" class="accounts-list" name="checkbox-inline" value="<%=account.fbAccountId%>"><i></i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                        <%=(i+1)%>
                                                            <!--</label>-->
                                                    </td>
                                                    <td>
                                                        <%=(account.name==''?account.fbAccountId:account.name)%>
                                                    </td>
                                                    <td>
                                                        <%=account.fbAccountId%>
                                                    </td>
                                                </tr>
                                                <% }) %>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </article>
                </div>
                <% } %>
                    <% if(changeAccounts.length>0){ %>
                        <div class="row">
                            <article class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                <div class="jarviswidget jarviswidget-color-darken" id="wid-id-4" data-widget-editbutton="false">
                                    <header>
                                        <h2>{{i18n-AccountUpdate}}</h2>
                                    </header>
                                    <div>
                                        <div class="widget-body no-padding">
                                            <table class="table table-bordered table-striped table-condensed table-hover smart-form has-tickbox">
                                                <thead>
                                                    <tr>
                                                        <th>{{i18n-order}}</th>
                                                        <th>{{i18n-fbAccountName}}</th>
                                                        <th>{{i18n-fbAccountId}}</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <% _.each(changeAccounts, function(account,i) { %>
                                                        <tr>
                                                            <td style="width:65px;">
                                                                <input type="hidden" name="checkbox-inline-update" class="accounts-list" value="<%=account.fbAccountId%>"><i></i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                                <%=(i+1)%>
                                                            </td>
                                                            <td>
                                                                <%=(account.name==''?account.fbAccountId:account.name)%>
                                                            </td>
                                                            <td>
                                                                <%=account.fbAccountId%>
                                                            </td>
                                                        </tr>
                                                        <% }) %>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </article>
                        </div>
                        <% } %>
</script>
<script type="text/x-template" id="t-history">
    <table class="table table-bordered table-striped">
        <thead>
            <tr>
                <th width="25%">{{i18n-synDate}}</th>
                <th width="20%">{{i18n-optAction}}</th>
                <th width="55%">{{i18n-accountList}}</th>
            </tr>
        </thead>
        <tbody>
            <% _.each(history, function(data,i) { %>
                <tr>
                    <td>
                        <%=data.date%>
                    </td>
                    <td>
                        <%=(data.operatorType==''?'--':data.operatorType)%>
                    </td>
                    <td>
                        <%=(data.accounts==''?'--':data.accounts)%>
                    </td>
                </tr>
                <% }) %>
        </tbody>
    </table>
</script>
